<template>
    <div class="searchBarItem">
        <div :class="props.activeindex == index ? 'item active' : 'item'" v-for="(item, index) in props.list_search"  @click="changeSystem(index)">
            <span>{{ item.name }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
// import { useMain, store } from "@/store/index";
// import { storeToRefs } from 'pinia';
// import 'swiper/scss';
interface Ilist {
    childList: [];
    code: string;
    codePath: string;
    id: string;
    idPath: string;
    level: number;
    name: string;
    parentId: string;
}

const props = defineProps({
    list_search: {
        type: Array<Ilist>,
        default: []
    },
    activeindex: {
        type: Number,
        default: 0
    },
    equipmentType: {
        type: String,
        default: "commonList"
    }
})

// const useMainStore = useMain(store);//pinia
// let { showSpread } = storeToRefs(useMainStore);//左侧菜单栏是否展开 storeToRefs 保持响应式



const emit = defineEmits(['changeActiveIndex'])

const changeSystem = (index: number) => {
    emit('changeActiveIndex', index);
}


</script>

<style scoped lang="scss">
.searchBarItem {
    flex: 1;
    .item {
        display: inline-block;
        padding: 0 vw(10);
        margin-right: vw(16);
        margin-bottom: vw(15);
        color: rgb(112, 105, 95);
        cursor: pointer;
        text-align: center;
        line-height: vh(20);
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: vw(12);
        color: #FFFFFF;
        min-width: vw(90);
        background: rgba(0, 227, 254, 0.2);
        border-radius: vw(4);
        &.active {
            color: #00E3FE;
            background: rgba(0,227,254,0.2);
            border-radius: vw(4);
            border: 1px solid #00E3FE;
        }
    }
}
</style>
